<template>
    <div class="history">
        <div class="crumbs">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item> <i class="el-icon-folder" style="margin-right:10px"></i>项目部管理 </el-breadcrumb-item>
                <el-breadcrumb-item>历史项目</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <div class="title">历史项目</div>
                <div>
                    <el-button type="primary" class="titleBtn1 exportBtn" @click="tableToExcel">导出</el-button>
                </div>
                <div class="searchBox">
                    <div class="prjectName mr20" style="padding-left:40px">
                        <span class="name">项目名称</span>
                        <el-input class="handle-select mr10" placeholder="请输入" v-model="query.name"></el-input>
                    </div>
                    <div class="prjectName mr20">
                        <span class="name">项目类型</span>
                        <el-cascader
                            class="handle-select mr10"
                            v-model="category"
                            :options="options"
                            :props="{ expandTrigger: 'hover' }"
                            @change="handleChange"
                        ></el-cascader>
                    </div>
                    <div class="stateTime mr20">
                        <span class="name">开始时间</span>
                        <el-date-picker
                            class="handle-select"
                            v-model="query.startdate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择"
                        ></el-date-picker>
                    </div>
                    <el-button class="titleBtn" type="primary" @click="handleSearch">查询</el-button>
                    <el-button class="titleBtn1" type="primary" @click="reset">重置</el-button>
                </div>
            </div>
            <div class="selectMonthBox">
                <el-button
                    class="monthItem"
                    :class="{ timeChecked: isClick == index }"
                    @click="isChecked(index, item.id)"
                    v-for="(item, index) in tableHeadList"
                    :key="item.id"
                >
                    {{ item.modelName }}/{{ item.number || 0 }}
                </el-button>
            </div>
            <!-- <div class="selectMonthBox">
                <button
                    class="monthItem"
                    :class="{ timeChecked: isClick == index }"
                    @click="isChecked(index, item.id)"
                    v-for="(item, index) in tableHeadList"
                    :key="item.id"
                >
                    {{ item.modelName }}/{{ item.number || 0 }}
                </button>
            </div> -->
            <div class="tableBox">
                <table id="table" style="width:100%">
                    <thead>
                        <tr>
                            <th class="tableTitle">项目ID</th>
                            <th class="tableTitle">项目名称</th>
                            <th class="tableTitle">开工时间</th>
                            <th class="tableTitle">工期</th>
                            <th class="tableTitle">合同总产值</th>
                            <th class="tableTitle">预算金额</th>
                            <th class="tableTitle">已使用</th>
                            <th class="tableTitle">比例</th>
                            <th class="tableTitle" v-for="(item, index) in tableData.titleList" :key="index">{{ item }}</th>
                            <th class="tableTitle">月报情况</th>
                            <th class="tableTitle">实际利润率</th>
                            <th class="tableTitle">实际操作</th>
                        </tr>
                    </thead>
                    <tbody class="tabletbody">
                        <tr v-for="(user, index) in tableData.projectList" :class="index % 2 == 0 ? 'tr1' : 'tr2'" :key="index">
                            <td style="text-align:center;">
                                <el-tooltip class="item" effect="dark" :content="user.projectid" placement="top">
                                    <div class="cell el-tooltip" style="width: 111px;">
                                        {{ user.projectid }}
                                    </div>
                                </el-tooltip>
                            </td>
                            <td style="text-align:center;">
                                <el-tooltip class="item" effect="dark" :content="user.projectname" placement="top">
                                    <div class="cell el-tooltip" style="width: 105px;">{{ user.projectname }}</div>
                                </el-tooltip>
                            </td>
                            <td style="text-align:center;">{{ user.startdate }}</td>
                            <td style="text-align:center;">
                                <span v-if="user.period">{{ user.period }}个月</span>
                            </td>
                            <td style="text-align:center;">
                                <span v-if="user.contractvalue">{{ user.contractvalue }}万</span>
                            </td>
                            <td style="text-align:center;">
                                <span v-if="user.budgetAmount">{{ user.budgetAmount }}万</span>
                            </td>
                            <td style="text-align:center;">
                                <span v-if="user.isUse">{{ user.isUse }}万</span>
                            </td>
                            <td style="text-align:center;">
                                <span v-if="user.scale">{{ user.scale }}%</span>
                            </td>
                            <td style="text-align:center;" v-for="(item, index) in user.decompositionList" :key="index">{{ item }}</td>
                            <td style="text-align:center;">{{ isState(user.monthlyReport) }}</td>
                            <td style="text-align:center;">
                                <span v-if="user.profit">{{ user.profit }}%</span>
                            </td>
                            <td style="text-align:center;">
                                <el-button type="text" @click="handleDetail(index, user)">细化分解</el-button>
                            </td>
                        </tr>
                        <tr style="height:60px;" v-if="tableData && tableData.projectList && tableData.projectList.length == 0">
                            <td style="text-align:center;" colspan="11">
                                <div style="white-space:nowrap;height:44px;line-height:44px;cursor:pointer;">
                                    <span style="margin-left:11px;font-size:13px;color:#333;width:200px;">暂无数据</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="pagination">
                <el-pagination
                    background
                    layout=" prev, pager, next"
                    :current-page="query.page"
                    :page-size="pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <!-- 导出弹窗 -->
        <el-dialog title="标题" :visible.sync="exportVisible" width="1252px" custom-class="output" :lock-scroll="false">
            <el-form ref="exportForm" :model="exportObj" label-width="80px">
                <div class="exportRow rowOne">
                    <el-form-item label="开始时间">
                        <el-date-picker
                            value-format="yyyy-MM-dd"
                            v-model="exportObj.start"
                            type="date"
                            @change="startChange"
                            placeholder="选择日期"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker
                            value-format="yyyy-MM-dd"
                            v-model="exportObj.end"
                            type="date"
                            @change="endChange"
                            placeholder="选择日期"
                        ></el-date-picker>
                    </el-form-item>
                </div>
                <div class="exportRow rowTwo">
                    <el-form-item label="表格形式">
                        <el-select v-model="exportObj.type" placeholder="请选择">
                            <el-option v-for="item in tabular" :key="item.value" :value="item.value" :label="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="exportRow">
                    <el-form-item label="导出范围">
                        <el-button type="primary" class="titleBtn1" @click="noneChecked">全不选</el-button>
                        <el-button type="primary" class="titleBtn" @click="allChecked">全选</el-button>
                    </el-form-item>
                </div>
                <div class="exportRow">
                    <el-form-item label=" ">
                        <el-select v-model="exportObj.depart" multiple placeholder="请选择部门" @change="departChange">
                            <el-option
                                v-for="item in departList"
                                :key="item.deptid"
                                :value="item.deptid"
                                :label="item.deptname"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-select v-model="exportObj.project" @visible-change="getprojectList" multiple placeholder="请选择项目">
                            <el-option
                                v-for="item in projectList"
                                :key="item.projectid"
                                :value="item.projectid"
                                :label="item.projectname"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
            <div class="exportRow exportfoot">
                <el-button type="primary" class="titleBtn1" @click="cancelExport">返回</el-button>
                <el-button type="primary" class="titleBtn" @click="confirmExport">导出</el-button>
            </div>
        </el-dialog>
        <!-- 项目细化分解表 -->
        <el-dialog title="项目细化分解表" :visible.sync="projectDetailVisible" width="70%" custom-class="output" :lock-scroll="false">
            <div class="selectMonthBox">
                <!-- <button class="monthItem" @click="isChecked">全部</button> -->
                <button
                    class="monthItem"
                    :class="{ timeChecked: montClick == index }"
                    @click="isCheckedmonth(item, index)"
                    v-for="(item, index) in monthList"
                    :key="index"
                >
                    {{ item.month }}
                </button>
            </div>
            <el-table
                :data="specifyList"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                default-expand-all
                :tree-props="{ children: 'modelList', hasChildren: 'hasChildren' }"
                :cell-style="columnStyle"
            >
                <el-table-column label="分类名称" width="240">
                    <template slot-scope="scope">
                        <!-- <i class="el-icon-time"></i> -->
                        <span style="margin-left: 10px">
                            {{ scope.row.oneLevelName || scope.row.twoLevelName || scope.row.threeLevelName }}
                        </span>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="name" label="姓名" sortable width="180"> </el-table-column> -->
                <el-table-column label="预算金额" style="width:100%;text-align:center;">
                    <template slot-scope="scope">
                        <span style="text-align:center;">{{ scope.row.budgetAmount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="累计支出" v-if="montClick != 0">
                    <template slot-scope="scope">
                        <span>{{ scope.row.budgetAmount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="已使用" v-if="montClick == 0">
                    <template slot-scope="scope">
                        <span>{{ scope.row.isUse }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="上报人">
                    <template slot-scope="scope">
                        <span>{{ scope.row.reportPer }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="本月支出" v-if="montClick != 0">
                    <template slot-scope="scope">
                        <span>{{ scope.row.monthCost }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="余额" v-if="montClick != 0">
                    <template slot-scope="scope">
                        <span>{{ scope.row.over }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="最后上报时间" v-if="montClick == 0">
                    <template slot-scope="scope">
                        <span>{{ scope.row.reportTime }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import {
    projectlist,
    getModelList,
    commongetCategoryList,
    projectgetMonthlyReportTitleList,
    projectspecifyList,
    commongetDepartmentList,
    excelProjectList,
    projectHistory,
    BASE_URL
} from '@/api/index';
import axios from 'axios';
export default {
    name: 'basetable',
    data() {
        return {
            category: '', //分类
            modelId: '', //模板id
            query: {
                name: '',
                startdate: ''
            },
            specifyList: [], //细化分解项列表
            titleList: [], //细化分解项标题列表
            options: [], //项目类型数据
            exportObj: {
                //导出弹窗的对象
                start: null,
                end: null,
                type: '',
                depart: [],
                project: []
            },
            pageTotal: 0,
            pageSize: 10,
            tableData: [], //列表数据
            tableData1: [],
            projectDetailVisible: false, //细化分解弹窗状态
            tableHeadList: [], //模板列表
            monthList: [], //月份列表
            isClick: 0, // tabindex
            montClick: 0,
            exportVisible: false,
            projectid: '', //项目id
            month: '', //月份
            page: 1, // 当前页
            levelArr: {
                汇总: '汇总',
                一: 1,
                二: 2,
                三: 3,
                四: 4,
                五: 5,
                六: 6,
                七: 7,
                八: 8,
                九: 9,
                十: 10
            },
            tabular: [
                { name: '项目成本导出', value: 1 },
                { name: '项目细化分解导出表里', value: 2 },
                { name: '项目结算报表', value: 3 }
            ],
            departList: [], // 部门列表
            projectList: [] // 项目列表
        };
    },
    created() {
        // 获取模板列表
        this.getmodellistFunc();
        // 获取所有项目类型
        this.getAllCategory();
    },
    methods: {
        //切换模板
        isChecked(index, id) {
            this.isClick = index;
            this.modelId = id;
            this.getData({ page: this.page });
        },
        //切换月份
        isCheckedmonth(obj, index) {
            this.month = obj.month;
            this.montClick = index;
            this.getspecifyList();
        },
        // 获取细化分解项列表
        getspecifyList() {
            let data = {
                projectid: this.projectid,
                type: 2
            };
            console.log(this.month);
            if (this.month != '汇总') {
                data.month = this.month;
            }
            console.log(data)

            projectspecifyList(data).then(res => {
                if (res.code == 200) {
                    console.log(res);
                    this.titleList = res.result.titleList;
                    this.specifyList = res.result.specifyList;
                } else {
                    this.$message.error(res.message);
                }
            });
            console.log(data);
        },
        // 获取月报标题列表
        getMonthlyReportTitleList(id) {
            projectgetMonthlyReportTitleList({ projectid: id }).then(res => {
                if (res.code == 200) {
                    console.log(res);
                    // if (!res.result || !res.result.monthTitleList || res.result.monthTitleList.length < 1) return;
                    this.monthList = res.result.monthTitleList || [];
                    this.monthList.unshift({ month: '汇总' });
                    console.log(this.monthList);
                    // this.monthList.push({ month: '一' });
                } else {
                    this.$message.error(res.message);
                }
            });
        },
        // 获取模板列表
        getmodellistFunc() {
            getModelList({ type: 2 }).then(res => {
                if (res.code === 200) {
                    this.tableHeadList = res.result;
                    if (this.tableHeadList) {
                        this.modelId = this.tableHeadList[0].id;
                    }
                    this.getData({ page: this.page });
                }
            });
        },
        // 获取历史项目列表
        getData(data) {
            // type 查询历史项目始终为2
            let params = {
                ...data,
                type: 2,
                size: 10,
                modelId: this.modelId
            };
            projectlist(params).then(res => {
                if (res.code === 200) {
                    this.tableData = res.result;
                    this.tableData.projectList.forEach(item => {
                        if (item.decompositionList.length != this.tableData.titleList.length) {
                            let index = this.tableData.titleList.length - item.decompositionList.length;
                            for (var i = 0; i < index; i++) {
                                item.decompositionList.push('');
                            }
                        }
                    });
                    this.query.page = res.result.pageInfo.current;
                    this.pageTotal = res.result.pageInfo.total;
                } else {
                    this.tableData = [];
                }
            });
        },
        //格式化月报情况
        isState(scope) {
            if (scope === 1) {
                return '待审核';
            } else if (scope === 2) {
                return '驳回';
            } else if (scope === 3) {
                return '已报';
            } else if (scope === 4) {
                return '未报';
            } else if (scope === 5) {
                return '超时';
            }
        },
        // 触发搜索按钮
        handleSearch() {
            this.page = 1;
            let data = {
                page: this.page
            };
            if (this.query.name) {
                data.name = this.query.name;
            }
            if (this.query.startdate) {
                data.startTime = this.query.startdate;
            }
            if (this.category) {
                data.categoryId = this.category[1];
            }
            this.getData(data);
        },
        //点击细化分解
        handleDetail(index, row) {
            this.projectid = row.projectid;
            this.projectDetailVisible = true;
            this.getMonthlyReportTitleList(row.projectid);
            this.getspecifyList();
        },
        // 分页导航
        handlePageChange(val) {
            // alert(val)
            this.page = val;
            this.getData({ page: this.page });
        },
        //点击重置
        reset() {
            this.query = {
                name: '',
                startdate: ''
            };
            this.page = 1;
            this.category = '';
            this.getData({ page: this.page });
        },
        //点击导出
        tableToExcel() {
            //列标题
            this.exportVisible = true;
            this.exportObj = {}
            commongetDepartmentList().then(res => {
                if (res.code === 200) {
                    this.departList = res.result;
                } else {
                    this.$message.error(res.message);
                }
            });
        },
        getprojectList(show) {
            if (!show) return;
            if (!this.exportObj.start) {
                this.$message.warning('请选择开始时间');
                return;
            }
            if (!this.exportObj.end) {
                this.$message.warning('请选择结束时间');
                return;
            }
            if (!this.exportObj.depart || this.exportObj.depart.length < 1) {
                this.$message.warning('请选择部门');
                return;
            }
            let params = {
                startDate: this.exportObj.start,
                endDate: this.exportObj.end,
                deptidList: JSON.stringify(this.exportObj.depart)
            };
            excelProjectList(params).then(res => {
                if (res.code === 200) {
                    this.projectList = res.result;
                } else this.$message.error(res.message);
            });
        },
        // 全选
        allChecked() {
            this.exportObj.depart = this.departList.map(n => n.deptid);
            console.log(this.exportObj.depart);
        },
        // 全不选
        noneChecked() {
            this.exportObj.depart = [];
            console.log(this.exportObj.depart);
        },
        // 开始时间变化
        startChange() {
            this.projectList = [];
        },
        // 结束时间变化
        endChange() {
            this.projectList = [];
        },
        // 部门选择变化
        departChange() {
            this.projectList = [];
        },
        //取所有项目的分类
        getAllCategory() {
            commongetCategoryList({}).then(res => {
                if (res.code == 200) {
                    this.options = res.result;
                    this.options.filter((item, index) => {
                        item.value = item.id;
                        item.label = item.name;
                        item.children = item.categoryList;
                        item.children.filter((item, index) => {
                            item.value = item.id;
                            item.label = item.name;
                        });
                    });
                } else {
                    this.$message.error(message);
                }
            });
        },
        //点击项目类型
        handleChange(value) {
            (this.query.classifyId = value[0]), (this.query.categoryId = value[1]);
        },
        // 点击返回
        cancelExport() {
            (this.exportObj = {
                //导出弹窗的对象
                start: null,
                end: null,
                depart: [],
                project: []
            }),
                (this.exportVisible = false);
        },
        // 确认导出
        confirmExport() {
            if (this.exportObj.type === '') {
                this.$message.warning('请选择表格形式')
            }
            if (this.exportObj.project.length > 0) {
                // projectHistory
                // let a = document.createElement('a')
                // a.href = `${BASE_URL}cost/excel/project/history?projectIdList=${JSON.stringify(this.exportObj.project)}&modelId=${this.modelId}`
                // a.target = '_blank'
                // document.body.appendChild(a)
                // a.click()
                // document.body.removeChild(a)
                // this.cancelExport()
                let http = axios.create({
                    headers: {
                        Authorization: `${localStorage.getItem('token')}`
                    },
                    responseType: 'blob',
                    baseURL: ''
                });
                http.post(`/cost/excel/project/history`, {
                    projectIdList: JSON.stringify(this.exportObj.project),
                    modelId: this.modelId,
                    type: this.exportObj.type
                })
                    .then(result => {
                        // if(!result.data.type){
                        // 文件下载
                        const blob = new Blob([result.data], {
                            type: 'application/vnd.ms-excel'
                        });
                        let link = document.createElement('a');
                        link.href = URL.createObjectURL(blob);
                        let index = this.tabular.findIndex(item => item.value === this.exportObj.type)
                        let name = this.tabular[index].name
                        link.setAttribute('download', `${name}.zip`);
                        link.click();
                        link = null;
                        // this.$message.success('导出成功');
                        // }else{
                        //   this.$message.success('导出失败');
                        // }
                    })
                    .catch(err => {
                        console.error(err);
                    });
            } else {
                this.$message.error('请选择项目');
            }
        },
        // 修改分类名称样式
        columnStyle({ row, column, rowIndex, columnIndex }) {
	           if (columnIndex ==0) {   //第三第四列的背景色就改变了2和3都是列数的下标
	          return 'text-align:left;'
	  		  	}else{
              return 'text-align:center'
            }
	   	 },
    }
};
</script>

<style scoped lang="scss">
.handle-box {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.title {
    height: 28px;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    margin-right: 40px;
    min-width: 80px;
}
.titleBtn {
    background: rgba(33, 74, 143, 1);
    color: #fff;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    height: 35px;
    width: 5.625rem /* 90/16 */;
}
.titleBtn1 {
    background: rgba(0, 79, 171, 0.2);
    color: rgba(0, 79, 171, 1);
    border: none;
    font-size: 16px;
    border-radius: 5px;
    height: 35px;
    margin-left: 2.5rem /* 40/16 */;
    width: 5.625rem /* 90/16 */;
}
.exportBtn {
    margin-left: 6.875rem; /* 110/16 */
}
.handle-box .name {
    margin-right: 10px;
}
.mr0 {
    font-size: 14px;
    min-width: 234px;
}
.mr20 {
    font-size: 14px;
    // margin-right: 8px;
    min-width: 221px;
}
.handle-select {
    width: 140px;
}
.searchBox {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.title {
    float: left;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.tableTitle {
    background: rgba(184, 216, 255, 0.2);
    border: 1px solid rgba(184, 216, 255, 1);
    margin: 0;
    min-width: 80px;
    height: 45px;
}
.history >>> .el-dialog__body {
    padding: 0 20px 30px 30px;
}
.tr1 {
    height: 41px;
}
.tr2 {
    height: 44px;
    background: rgba(184, 216, 255, 0.05);
}
#table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: scroll;
}
#table {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
}
#table .cell.el-tooltip {
    white-space: nowrap;
    min-width: 50px;
}
#table .cell {
    padding-left: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    padding-right: 10px;
}
/deep/.el-table th > .cell {
    text-align: center;
}
// /deep/.el-table .cell {
//     text-align: center;
// }
#table td {
    border: 1px solid rgba(184, 216, 255, 1);
}
.tdItem {
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    height: 40px;
    text-overflow: ellipsis;
    max-width: 200px;
}
.tableBox {
    min-height: 300px;
    width: 100%;
    overflow-x: scroll;
}
.history/deep/.el-dialog__body {
    max-height: 600px;
    overflow-y: scroll;
}
.progress {
    width: 100%;
    border: 1px solid rgba(184, 216, 255, 1);
    border-top: none;
    box-sizing: border-box;
    height: 60px;
    padding: 0 20px;
    div {
        // width: 300px;
        display: flex;
        height: 60px;
        align-items: center;
        // span {
        //     width: 80px;
        // }
    }
}
.progress/deep/.el-progress__text {
    // width: 50px;
    padding-left: 22px;
}
.tdItem1 {
    width: 140px;
    padding: 0 0 0 10px;
    text-align: left;

    box-sizing: border-box;
}
.el-progress {
    display: flex;
    align-items: center;
}
.handle-box /deep/.el-input--small .el-input__inner {
    height: 35px;
}
.progress/deep/.el-progress-bar {
    width: 339px;
}
.progress/deep/.el-progress__text {
    width: 100% !important;
}
.tdItem/deep/.el-progress-bar {
    width: 144px;
}
.history/deep/.el-dialog__body {
    padding-top: 35px !important;
    padding-bottom: 64px;
}
.selectMonthBox {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #004fab;
    margin-bottom: 30px;
    padding-left: 50px;
    box-sizing: border-box;
    flex-wrap: wrap;
    position: relative;
    .monthItem {
        margin-top: 5px;
        min-width: 93px;
        height: 35px;
        background: rgba(255, 255, 255, 1);
        border-radius: 2px;
        border: 1px solid rgba(198, 203, 212, 1);
        text-align: center;
        margin-right: 15px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
    }
}
.timeChecked {
    background: rgba(0, 79, 171, 1) !important;
    color: #fff !important;
    border: 1px solid rgba(0, 79, 171, 1) !important;
}
.exportRow {
    display: flex;
    width: 30rem /* 480/16 */;
    .titleBtn1 {
        margin-left: 0;
    }
    .titleBtn {
        margin-left: 2.5rem /* 40/16 */;
    }
}
.rowOne {
    justify-content: space-between;
    /deep/.el-input__inner {
        width: 8.75rem /* 140/16 */;
    }
    /deep/.el-form-item {
        width: 50%;
        text-align: right;
    }
}
.rowTwo {
    /deep/.el-form-item {
        width: 100%;
    }
    /deep/.el-input__inner {
        width: 100%;
    }
    /deep/.el-select {
        width: 100%;
    }
}
.exportfoot {
    justify-content: center;
    padding-top: 14.875rem /* 238/16 */;
    width: 100%;
    .titleBtn1 {
        margin-right: 3.5rem /* 56/16 */;
    }
}
.tabletbody tr > td {
    background: rgba(184, 216, 255, 0.05);
    height: 44px;
    font-size: 14px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.tabletbody tr:hover > td {
    background-color: #fef6e9;
    color: rgba(0, 79, 171, 1);
    font-size: 14px;
}
.history /deep/.el-icon-close:before {
    border: none;
    color: none;
    background: none;
    font-size: none;
    padding: none;
}
</style>
